import { Button, Descriptions, Typography, Flex, Layout, Table, Tabs, Timeline, Affix, Empty, Spin } from 'antd'
import React, { useState, useEffect } from 'react'
import "./index.scss"
import baogao from '@/assets/images/enterprise/baogao@2x.png'
import pingfenbg from '@/assets/images/enterprise/pingfen_bg@2x.png'
import Jibenxinxi from './Jibenxinxi'
import FirmLogo from '@/components/FirmLogo'
import img1 from '@/assets/images/enterprise/1@2x.png'
import img2 from '@/assets/images/enterprise/2@2x.png'
import img3 from '@/assets/images/enterprise/3@2x.png'
import riskTitle from '@/assets/images/enterprise/sikufengxianxansuo.png'
import { Link, useSearchParams } from 'react-router-dom'
import StickyBox from 'react-sticky-box';
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import TagsCom from '@/components/TagsCom'
import Score from '@/components/Score'
import Jiaoyitezheng from './Jiaoyitezheng'
import Duishoutezheng from './Duishoutezheng'
import Jiesuanpianhao from './Jiesuanpianhao'
import Zijinfengxian from './Zijinfengxian'
import Pingfenpingji from './Pingfenpingji'
import { portraitAPI } from '@/apis'
import _ from 'lodash'
const orders = [img1, img2, img3]
const { Content, Sider } = Layout
const { Paragraph } = Typography

const unit = [
    {
        key: '0',
        label: '上游单位',
    },
    {
        key: '1',
        label: '下游单位'
    },
    {
        key: '2',
        label: '相似企业'
    }
]
const columns = [
    {
        title: '排名',
        dataIndex: 'order',
        key: 'order',
        align: 'center',
        width: 80,
        render: (dom, rowData, index) => {
            return (rowData.order < 4 ?
                <img className="order" src={orders[rowData.order - 1]} alt="" /> : <h4 className="order">{rowData.order}</h4>
            )
        }
    },
    {
        title: '单位名称',
        dataIndex: 'unit',
        key: 'unit',
        align: 'left',
        render: (dom, rowData, index) => {
            return <Flex className="unit-list" align="center">
                <FirmLogo name={rowData.unit?.name?.slice(0, 4)} size={36} font={12}></FirmLogo>
                <div className="info">
                    <Paragraph style={{ width: 80 }} title={rowData.unit.name} ellipsis={true}>{rowData.unit.name}</Paragraph>
                    <p>{rowData.unit.type}</p>
                </div>
            </Flex>
        }
    },
    {
        title: '金额(万元)',
        dataIndex: 'core',
        key: 'core',
        align: 'right',
        render: (dom, rowData, index) => {
            return <h4 className="core">{rowData.core.toLocaleString()}</h4>
        }
    }
]





export default function Enterprise() {
    const [params] = useSearchParams()
    const company = params.get('company')
    const tags = ['小微企业', '成员单位', '开业']
    const [rightSiderW, setRightSiderW] = useState(310);
    const [collapsed, setCollapsed] = useState(false)
    const [isloading, setisloading] = useState(false)
    const [jibenxinxi, setJibenxinxi] = useState({
        company_info: [
            {
                tags: []
            }
        ],
        company_executives: [],
        company_fx_label: [],
        upstream_top: [],
        downstream_top: [],
        risk_history: [],
        score_info: []
    })
    const [dataSource, setdataSource] = useState([])
    const items = [
        {
            key: '1',
            label: '基本信息',
            children: <Jibenxinxi data={jibenxinxi} />,

        },
        {
            key: '2',
            label: '交易特征',
            children: <Jiaoyitezheng data={jibenxinxi} />,
        },
        {
            key: '3',
            label: '对手特征',
            children: <Duishoutezheng data={jibenxinxi} />,
        },
        {
            key: '4',
            label: '结算偏好',
            children: <Jiesuanpianhao data={jibenxinxi} />,
        },
        {
            key: '5',
            label: '资金风险',
            children: <Zijinfengxian data={jibenxinxi} />,
        },
        {
            key: '6',
            label: '评分评级',
            children: <Pingfenpingji data={jibenxinxi} />,
        }
    ];
    useEffect(() => {
        function getDate() {
            setisloading(true)
            portraitAPI({ company }).then(res => {
                res.data.company_fx_label = res.data.company_fx_label.map(item => ({
                    "value": item.totalamount,
                    "name": item.TYPE
                }))
                res.data.upstream_top = res.data.upstream_top.map((item, index) => ({
                    key: index + 1,
                    order: index + 1,
                    unit: {
                        name: item.gsmc,
                        type: '',
                    },
                    core: item.total
                }))
                res.data.downstream_top = res.data.downstream_top.map((item, index) => ({
                    key: index + 1,
                    order: index + 1,
                    unit: {
                        name: item.gsmc,
                        type: '',
                    },
                    core: item.total
                }))
                res.data.risk_history = res.data.risk_history.slice(0, 10).map(item => ({
                    label: <h5 className="timeline-lable">{item.date?.slice(0,10)}</h5>,
                    color: '#f93920',
                    children: <Flex align="center" justify="space-between" className="timeline-children">
                        <Paragraph className="item" style={{ width: 90 }} ellipsis={true}>{item.type}</Paragraph>
                        <h6><span style={{marginRight:2}}>{item.fkje.toLocaleString()}</span>万</h6>
                    </Flex>,
                }))

                if (res.data.company_info.length > 0) {
                    let tags = [];
                    if (res.data.company_info[0].IS_XWQY) {
                        tags.push('小微企业')
                    }
                    if (res.data.company_info[0].IS_MYGS) {
                        tags.push('贸易公司')
                    }
                    if (res.data.company_info[0].IS_CYDW) {
                        tags.push('成员单位')
                    }
                    tags.push(res.data.company_info[0].DJZT)
                    res.data.company_info[0].tags = tags
                    res.data.company_info[0].IS_CYDW = res.data.company_info[0].IS_CYDW || 0
                } else {
                    res.data.company_info = jibenxinxi.company_info
                }
                setisloading(false)
                console.log(res.data)
                setJibenxinxi(res.data)
                setdataSource(res.data.upstream_top)
                //设置当前公司是否为成员单位
                localStorage.setItem('CURR_IS_CYDW',res.data.company_info[0].IS_CYDW || 0)
            })


        }
        getDate()
    }, [company])

    const onChange = (key) => {
        if (key == 0) {
            setdataSource(jibenxinxi.upstream_top)
        } else if (key == 1) {
            setdataSource(jibenxinxi.downstream_top)
        } else {
            setdataSource([])
        }
    }
    const renderTabBar = (props, DefaultTabBar) => (
        <StickyBox offsetTop={-20} style={{ zIndex: 99 }}>
            <DefaultTabBar size='small' className="typeTabs" {...props} style={{
                backgroundColor: '#f9f9f9'
            }} />
        </StickyBox>
    )
    useEffect(() => {
        collapsed ? setRightSiderW(20) : setRightSiderW(310)
    }, [collapsed])
    return (
        <Spin tip="页面加载中..." spinning={isloading} size='large'>
            <Layout className='enterprise-container'>
                <Content>
                    <div className='enterprise-info'>
                        <Flex justify='space-between' align='center'>
                            <div>
                                <Flex align="center">
                                    <div className='firm-logo'>
                                        <FirmLogo name={company.slice(0, 4)} />
                                    </div>
                                    <div className='firm-intro'>
                                        <h3>{company}</h3>
                                        <TagsCom tags={jibenxinxi.company_info[0].tags}></TagsCom>
                                    </div>
                                </Flex>
                            </div>
                            <Flex>
                                <div className='give-mark'>
                                    <img src={pingfenbg} className='pingfenbg' alt="" />
                                    <Flex align='center' justify='space-between' className='mark-detail'>
                                        {/* <p><span>{_.round(jibenxinxi.score_info[0] && jibenxinxi.score_info[0].composite_score || 0, 1)}</span>分</p> */}
                                        <p><span>{
                                            jibenxinxi.score_info[0]?.composite_score != null
                                            ? _.round(jibenxinxi.score_info[0].composite_score, 1)
                                            : ' - '
                                        }</span>分</p>
                                        <div className='mark-chart'>
                                            <Score />
                                        </div>
                                    </Flex>
                                </div>
                                {/* <Flex className='down-report' align='center' justify='center' vertical>
                                <img src={baogao} alt="" />
                                <Button type='text'>下载报告</Button>
                            </Flex> */}
                            </Flex>
                        </Flex>
                    </div>
                    <div className='enterprise-detail'>
                        <Tabs size="large" renderTabBar={renderTabBar}
                            type="card" tabBarStyle={{ marginLeft: 30 }} centered tabBarGutter={0} defaultActiveKey="1" items={items} ></Tabs>
                    </div>
                </Content>

                <Sider style={{ backgroundColor: 'transparent' }} className='sider-wrap' width={rightSiderW}>
                    <Affix style={{
                        position: 'fixed',
                        top: '80px',
                        right: rightSiderW + 13,
                        zIndex: 11
                    }}>
                        <Button shape="circle" style={{
                            color: '#a7abb0',
                        }} size="small" icon={collapsed ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />} onClick={() => {
                            setCollapsed(!collapsed)
                        }} />
                    </Affix>
                    <div className='units'>
                        <Tabs size='small' indicator={{
                            size: 20
                        }} defaultActiveKey="0" items={unit} onChange={onChange} />
                        <Table pagination={false} size='small' bordered={false} columns={columns} dataSource={dataSource}></Table>
                    </div>
                    <div className="hitory-risk">
                        <Flex className="title" justify="space-between" align='center'>
                            <img src={riskTitle} alt="" />
                            <Link className="more">全部 &gt;</Link>
                        </Flex>
                        <div className="timeLine">
                            {jibenxinxi.risk_history.length > 0 ? <Timeline mode="left" items={jibenxinxi.risk_history} /> : <Empty description='暂无风险' image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>}
                        </div>
                    </div>
                </Sider>
            </Layout>
        </Spin>
    )
}
